<template>
  <el-table :data="orderList" stripe border>
    <!-- 多选 -->
    <el-table-column type="index" align="center" width="55" />

    <!-- ID -->
    <el-table-column label="ID💎" align="center" prop="id" />

    <!-- 订单编号 -->
    <el-table-column label="订单编号📞" align="center" prop="orderNum" />

    <!-- 产品名称 -->
    <el-table-column label="产品名称🎅" align="center" prop="product.productNum" width="100px" />

    <!-- 金额 -->
    <el-table-column label="金额🎁" align="center" prop="product.productNum" width="100px" />

    <!-- 下单时间 -->
    <el-table-column label="下单时间🕛" align="center" prop="orderTime" width="200px">
      <template v-slot="data">{{ data.row.orderTime | timerFormat }}</template>
    </el-table-column>

    <!-- 订单状态 -->
    <el-table-column label="是否付款✅" align="center" prop="orderStatus" width="100px">
      <template v-slot="data">
        <el-tag v-if="data.row.orderStatus === 0" type="danger">未付款</el-tag>
        <el-tag v-if="data.row.orderStatus === 1">已付款</el-tag>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作😀" align="center" width="200px">
      <template v-slot="data">
        <div>
          <el-button-com
            icon="el-icon-edit"
            size="mini"
            @click.native="openEidtDialog(data.row.id)"
          />
          <el-button-com
            icon="el-icon-delete-solid"
            btnType="danger"
            size="mini"
            @click.native="delConfirm(data.row.id)"
          />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
// 组件
  import ElButtonCom from '@/components/common/ElButtonCom';

// 请求
  import { delOrderByOid } from '@/network/orderRequest.js';

export default {
  props: {
    orderList: Array
  },
  methods: {
    openEidtDialog(id) { // 开启编辑dialog
      this.$bus.$emit('openEidtDialog', id);
    },

    /**
     * 删除订单确认框
     */
   async delConfirm(id) { // 打开locationDialog
        const resConfirm = await this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err);
      
      // 判断用户执行的操作
      if (resConfirm !== 'confirm') {
        return this.$message('取消删除');
      }
      // 执行删除
      this.delOrder(id);
    },

    /**
     * 删除订单网络请求
     */
    async delOrder(oid) {
      const { meta } = await delOrderByOid(oid);
      if (meta.status !== 200) {
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getOrderData'); // 刷新数据
      return this.$message.success(meta.msg);
    }
  },
  components: {
    ElButtonCom
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
</style>